<template>
    <div id="app">
      <div class="login-container">
        <video muted="muted" src="//static.jx3.xoyo.com/hengdaoduanlang_kv2.mp4
" loop="loop" autoplay="autoplay" class="video"></video>
      </div>
      <div class="form-data">
      
      <h1 class="title">{{pageInfo.tltle}}</h1>
      
      <!-- 动态组件 -->
      <component :is="pageInfo.component"></component>

      <div class="toggle">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="icon"></use>
        </svg>
        <b @click="handleToggle">{{pageInfo.toggleDes}}</b>
      </div>
    </div>
  </div>
  </template>
   <script setup>
    import commonLogin from '../../components/login/commonLogin.vue';
    import smsLogin from '../../components/login/smsLogin.vue'
    import {watchEffect,ref,markRaw,computed} from 'vue'

    //声明一个页面数据
    let pageInfo = ref({
      tltle:'crm系统',   //标题
      // loginType:"common",   登入类型 commonLogin/smsLogin
      toggleDes:"点击切换手机登入",   //切换的描述信息
      component:markRaw(commonLogin)   //要切换的组件
    })

  //用于标记是否常规登入
  let isCommonLogin =ref(true)

  // 点击切换登入方式
  let handleToggle = () => {
    isCommonLogin.value = !isCommonLogin.value
  }

  //通过结合高级侦听器和vue3的动态组件来实现组件切换

  //vue3的动态组件，通过:is结合comment这个组件来实现动态绑定

  watchEffect(() => {
    // 常规登入
    if(isCommonLogin.value){
      pageInfo.value = {
        tltle:'crm系统',   //标题
        // loginType:"common",   登入类型 commonLogin/smsLogin
        toggleDes:"点击切换手机登入",   //切换的描述信息
        component:markRaw(commonLogin)   //要切换的组件
      }
    }else{
      // 手机短信登入
      pageInfo.value = {
        tltle:'短信登入',   //标题
        // loginType:"sms",   登入类型 commonLogin/smsLogin
        toggleDes:"使用用户密码登入",   //切换的描述信息
        component:markRaw(smsLogin)   //要切换的组件
      }
    }
  })

  //根据登入模式的切换，派发图标的名称
  let icon = computed(() =>{
    return isCommonLogin.value ? '#icon-iphone' : '#icon-qingtian'
  }
  )

  </script>
  
  <style lang="less">
    //定制组件，修改样式的思路
    //1.找到对应组件结构的类名
    //2.重新编写样式，覆盖原来的样式

    //样式修改不成功的因素和解决方案

    //1.确认类名是否正确

    //2.确认权重是否足够 !important

    //3.是否需要使用深度选择器   xxx :deep(选择器) scoped样式，层级嵌套比较深的时候

    #app,html,body,.login-container{
      height: 100%;
    }

    .form-data{
      position: fixed;
      right: 13%;
      top: 25%;
      border-radius: 5px;
      width: 400px;
      background-color: rgba(0,0,0,.3);
      padding: 100px 0 50px 0;
    }

    .title{
      margin: 0 0 60px 0 !important;
      text-align: center !important;
      color: #fff !important;
    }

    .username-form-item {
      .el-input{
        width: 200px !important;
      }
    }

    .el-form-item__label{
      color: #fff;
    }

    .password-form-item{
      .el-input{
        width: 200px !important;
      }
    }

    .captcha-form-item{
    
      .el-form-item__content{
        position: relative;
      }

      .el-input{
        width: 100px !important;
        border: none;
        border-radius: 5px 0 0 5px;
        // box-shadow: 0 0 0 2px transparent; 
        // box-shadow: none;
        // border-top-right-radius: 0 !important;
        // border-bottom-right-radius: 0 !important;
        outline: none;
      }
      .yzm{
        display: inline-block;
        width: 100px;
        height: 32px;
        // border: 1px solid;
        background-color: #fff !important;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        // position: absolute;
        top: 0;
        right: 81px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
      :deep(.el-input__wrapper){
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
      }
      
  }
    .login-container{
      text-align: center;
      color: #fff;
    }
    .login-container{
      .video{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }
    }
    video {
    object-fit: contain;
    }

    .icon{
      height: 2rem;
      width: 2rem;
    }

    .toggle{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: rgb(145, 231, 251);
      cursor: pointer;
    }

    .el-input__wrapper{
        box-shadow: none;
        outline: none;
        
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .el-form-item{
      margin-bottom: 30px;
    }
    button.el-button.el-button--primary{
      width: 200px;
      font-size: 18px;
      cursor: pointer;
    }
    .el-form-item.is-error .el-input__wrapper{
      box-shadow: none;
    }
    .el-input__wrapper:hover{
      box-shadow: none;
    }
    .el-input__wrapper.is-focus{
      box-shadow: none;
    }
    
  </style>
  